<template>
	<view class="page-container">
		<view class="login-card">
			<text class="form-title">欢迎登录</text>
			
			<view class="form-group">
				<text>用户名</text>
				<input type="text" placeholder="请输入用户名" v-model="username">
			</view>
			
			<view class="form-group">
				<text>密码</text>
				<input type="password" placeholder="请输入密码" v-model="password">
			</view>
			
			<button class="login-button" @click="login">登录</button>
			
			<view class="register-link">
				<text>还没有账号？</text>
				<text @click="toRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login(){
				if(this.username==''){
					uni.showToast({
						title:'请输入用户名'
					})
					return
				}
				if(this.password==''){
					uni.showToast({
						title:'请输入密码'
					})
					return
				}
				uni.request({
					url:'http://47.94.6.186:3001/api/user/login',
					method:'POST',
					data:{
						loginname:this.username,
						password:this.password
					},
					success:(res)=>{
						console.log(res.data)
						if(res.data.code==200){
							uni.showToast({
								title:'登录成功'
							})
							this.username=''
							this.password=''
							uni.setStorageSync('token',res.data.data.token)
							uni.setStorageSync('userid',res.data.data.userid)
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else{
							// 处理业务逻辑错误，如密码错误等
							uni.showToast({
								title: res.data.message || '登录失败',
								icon: 'none'
							})
						}
					},
					fail:(err)=>{
						console.log(err)
						// 处理网络请求失败
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					}
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			}
		},
	}
</script>

<style>
/* 登录页面样式 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx;
  box-sizing: border-box;
}

.login-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 60rpx 40rpx;
  margin-top: 100rpx;
}

.form-title {
  font-size: 44rpx;
  font-weight: bold;
  text-align: center;
  color: #333333;
  margin-bottom: 60rpx;
}

.form-group {
  margin-bottom: 40rpx;
}

.form-group text {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.form-group input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 28rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333333;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.form-group input:focus {
  border-color: #007aff;
  outline: none;
  box-shadow: 0 0 0 8rpx rgba(0, 122, 255, 0.1);
}

.form-group input::placeholder {
  color: #c0c0c0;
}

.login-button {
  width: 100%;
  height: 96rpx;
  background-color: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  transition: all 0.3s ease;
}

.login-button:active {
  background-color: #0056b3;
  transform: scale(0.98);
}

.register-link {
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
}

.register-link text {
  color: #007aff;
}

/* 响应式调整 */
@media screen and (min-width: 768px) {
  .login-card {
    max-width: 600rpx;
    margin: 100rpx auto;
    padding: 80rpx 60rpx;
  }
}
</style>
